/**
 * 用户端主要JavaScript文件
 * 包含表单处理、文件上传和数据展示等功能
 */

/**
 * 显示指定类型的表单
 * @param {string} formType - 表单类型（workorder/query/equipment/feedback）
 */
function showForm(formType) {
    // 隐藏所有表单
    document.querySelectorAll('.form-container').forEach(form => {
        form.classList.add('hidden');
    });
    
    // 显示选中的表单
    const form = document.getElementById(`${formType}-form`);
    if (form) {
        form.classList.remove('hidden');
    }
}

/**
 * 隐藏指定类型的表单
 * @param {string} formType - 表单类型
 */
function hideForm(formType) {
    const form = document.getElementById(`${formType}-form`);
    if (form) {
        form.classList.add('hidden');
    }
}

/**
 * 表单数据验证
 * @param {FormData} formData - 表单数据对象
 * @returns {boolean} 验证结果
 */
function validateForm(formData) {
    // 基础表单验证：检查必填项
    for (let [key, value] of formData.entries()) {
        if (!value && key !== 'file') {
            alert('请填写所有必填项');
            return false;
        }
    }
    return true;
}

/**
 * 处理表单提交
 * @param {string} formType - 表单类型
 * @param {FormData} formData - 表单数据
 */
function handleFormSubmit(formType, formData) {
    // API端点配置
    const apiEndpoints = {
        workorder: '/api/workorder/create',
        equipment: '/api/equipment/repair',
        feedback: '/api/feedback/submit'
    };

    // 模拟数据提交
    console.log(`提交${formType}表单数据到 ${apiEndpoints[formType]}:`, 
        Object.fromEntries(formData));
    
    // TODO: 实际项目中替换为真实的API调用
    setTimeout(() => {
        alert('提交成功！');
        hideForm(formType);
    }, 1000);
}

/**
 * 初始化文件上传功能
 * 包含拖拽上传和预览功能
 */
function initFileUpload() {
    const fileInput = document.getElementById('file-input');
    const filePreview = document.getElementById('file-preview');
    const uploadLabel = document.querySelector('.file-upload-label');

    if (fileInput && filePreview) {
        // 处理文件选择
        fileInput.addEventListener('change', function(e) {
            const files = Array.from(e.target.files);
            filePreview.innerHTML = '';

            // 生成文件预览
            files.forEach(file => {
                const reader = new FileReader();
                reader.onload = function(e) {
                    const preview = document.createElement('div');
                    preview.className = 'preview-item';
                    preview.innerHTML = `
                        <img src="${e.target.result}" alt="preview">
                        <span class="filename">${file.name}</span>
                        <button class="remove-file" onclick="removeFile(this)">×</button>
                    `;
                    filePreview.appendChild(preview);
                };
                reader.readAsDataURL(file);
            });
        });

        // 拖拽上传功能
        uploadLabel.addEventListener('dragover', (e) => {
            e.preventDefault();
            uploadLabel.classList.add('dragover');
        });

        uploadLabel.addEventListener('dragleave', () => {
            uploadLabel.classList.remove('dragover');
        });

        uploadLabel.addEventListener('drop', (e) => {
            e.preventDefault();
            uploadLabel.classList.remove('dragover');
            fileInput.files = e.dataTransfer.files;
            fileInput.dispatchEvent(new Event('change'));
        });
    }
}

/**
 * 移除文件预览项
 * @param {HTMLElement} button - 删除按钮元素
 */
function removeFile(button) {
    button.closest('.preview-item').remove();
}

/**
 * 更新工单表格显示
 * @param {Array} data - 工单数据数组
 */
function updateWorkOrderTable(data) {
    const tbody = document.querySelector('#query-form table tbody');
    if (tbody && data) {
        tbody.innerHTML = data.map(order => {
            // 设置紧急程度样式和文本
            const urgencyClass = `urgency-${order.urgency}`;
            const urgencyText = {
                'high': '紧急',
                'medium': '普通',
                'low': '低急'
            }[order.urgency];

            // 生成表格行HTML
            return `
                <tr class="${urgencyClass}">
                    <td>${order.id}</td>
                    <td>${order.type}</td>
                    <td>
                        <span class="urgency-tag ${urgencyClass}">
                            ${urgencyText}
                        </span>
                    </td>
                    <td>${order.status}</td>
                    <td>${order.createTime}</td>
                    <td>${order.handler}</td>
                    <td>
                        <button class="el-button small" onclick="viewWorkOrder('${order.id}')">
                            查看详情
                        </button>
                    </td>
                </tr>
            `;
        }).join('');
    }
}

// 页面加载完成后的初始化
document.addEventListener('DOMContentLoaded', function() {
    // 初始化文件上传功能
    initFileUpload();

    // 处理所有表单提交
    document.querySelectorAll('form').forEach(form => {
        form.addEventListener('submit', function(e) {
            e.preventDefault();
            const formType = this.closest('.form-container').id.replace('-form', '');
            const formData = new FormData(this);
            
            if (validateForm(formData)) {
                handleFormSubmit(formType, formData);
            }
        });
    });

    // 加载模拟数据
    const mockWorkOrders = [
        {
            id: 'WO2024001',
            type: '软件问题',
            urgency: 'high',
            status: '处理中',
            createTime: '2024-01-20',
            handler: '李工'
        },
        // ... 其他模拟数据
    ];

    // 显示模拟数据
    updateWorkOrderTable(mockWorkOrders);
}); 